import phaser from 'phaser/src/phaser.js';
import UIPlugin from '../../templates/ui/ui-plugin.js';

const COLOR_MAIN = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;

var content = `Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.`;

class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() { }

    create() {
        var textArea = this.rexUI.add.textArea({
            x: 400,
            y: 300,
            width: 250,
            height: 150,

            background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_MAIN),

            text: this.rexUI.add.BBCodeText(),

            slider: {
                track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
            },

            space: {
                left: 15,
                right: 15,
                top: 15,
                bottom: 15,

                text: 10,
            },

            scroller: {
                // pointerOutRelease: false,
            },

        })
            .layout()

        var textObject = textArea.getElement('text');
        textArea.typing = this.rexUI.add.textTyping(textObject, {
            wrap: true,
        });
        textArea.typing
            .on('type', function () {
                // Current typing conent is at text game object's text property
                // Assign this value to textArea
                textArea
                    .setText(textObject.text)
                    .scrollToBottom()
            })

        textArea.typing.start(content, 30);

    }

    update() { }
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    scene: Demo,
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        }]
    }
};

var game = new Phaser.Game(config);